<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="left">
          <h1>报修管理系统</h1>
        </div>
        <div class="right">
          <p>{{ userInfo.username }} 你好！</p>
          <el-button type="primary" @click="quitLogin">退出登录</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            router
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="/repair">
              <el-icon><icon-menu /></el-icon>
              <span>报修管理</span>
            </el-menu-item>
            <el-menu-item index="/user">
              <el-icon><list /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/worker">
              <el-icon><avatar /></el-icon>
              <span>维修员管理</span>
            </el-menu-item>
            <el-menu-item index="/user-advice">
              <el-icon><document /></el-icon>
              <span>用户反馈管理</span>
            </el-menu-item>
            <el-menu-item index="/worker-advice">
              <el-icon><setting /></el-icon>
              <span>职工反馈管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  List,
  Avatar
} from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const userInfo = JSON.parse(localStorage.getItem("userInfo"));
const defaultActive = ref("/repair");

defaultActive.value = route.path;

const quitLogin = () => {
  localStorage.removeItem("userInfo");
  router.push("/login");
};
</script>

<style scoped>
.common-layout {
  height: 100%;
  width: 100%;
}

.el-container {
  height: 100%;
  width: 100%;
}

.el-header {
  background-color: rgb(203, 242, 166);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-header .right {
  display: flex;
  align-items: center;
  gap: 0 20px;
}

.el-aside {
}

.el-main {
  background-color: #f3f3f3;
  padding: 0;
}

.el-menu {
  height: 100%;
}
</style>